@mixin toggle-colors($toggle-off-color: $toggle-off-color, $toggle-on-color: $toggle-on-color, $toggle-transition: cubic-bezier(0,1,0.5,1))

  input[type="checkbox"]

    &[disabled] ~ label
      color: rgba($toggle-off-color, 0.5)

    &:focus ~ label, &:hover ~ label
      .toggle__switch
        background-color: $toggle-off-color

    &:checked
      ~ label

        .toggle__switch
          background-color: lighten($toggle-on-color, 5%)

      &:focus, &:hover
        ~ label
          .toggle__switch
            background-color: $toggle-on-color

  label
    .toggle__switch
      transition: background-color 0.3s $toggle-transition
      background: lighten($toggle-off-color, 5%)

      &:after
        transition: transform 0.3s $toggle-transition

@mixin toggle-appearance($toggle-width: $toggle-width, $toggle-height: $toggle-height, $toggle-border-radius: $toggle-border-radius, $toggle-offset: $toggle-offset, $toggle-shadow: 0 3px 3px rgba(black, 0.3))
  $toggle-switch-width: $toggle-width / 2

  input[type="checkbox"]

    &:focus ~ label, &:hover ~ label
      .toggle__switch
        &:after
          box-shadow: $toggle-shadow

    &:checked
      ~ label
        .toggle__switch
          &:after
            transform: translate3d($toggle-width - ($toggle-height),0,0)

      &:focus, &:hover
        ~ label
          .toggle__switch &:after
            box-shadow: $toggle-shadow

  label
    position: relative
    margin-bottom: rem($global-font-size)

    .toggle__switch
      height: $toggle-height
      width: $toggle-width
      border-radius: $toggle-border-radius

      &:after
        content: ""
        top: $toggle-offset
        left: $toggle-offset
        border-radius: $toggle-border-radius/2
        width: $toggle-height - ($toggle-offset*2)
        height: $toggle-height - ($toggle-offset*2)
        z-index: 5

      &:hover
        &:after
          box-shadow: $toggle-shadow

.toggle
  position: relative
  *, *:before, *:after
    box-sizing: border-box

  input[type="checkbox"]
    opacity: 0
    position: absolute
    top: 0
    left: 0

    &[disabled] ~ label
      pointer-events: none
      .toggle__switch
        opacity: 0.4

  label
    position: relative

    .toggle__switch
      position: relative
      display: inline-block
      box-shadow: inset 0 1px 1px rgba(0,0,0,.1)

      &:after
        content: ""
        position: absolute
        display: inline-block
        height: rem(34px)
        width: rem(34px)
        z-index: 5
        background: white
        transform: translate3d(0,0,0)

  // Default values for .toggle class
  @include toggle-colors
  @include toggle-appearance
